<!-- 我的 - 通知中心 -->
<template>
  <view>
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <z-navbar title="通知中心" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
        <view class="h-100 flex justify-between items-center px-4">
          <view class="c-#333 text-28">消息（{{ state.totalNum }}）</view>
          <!-- 一直显示 -->
          <view class="c-#F4AF22 text-28" @click="onClear">全部已读</view>
        </view>
      </template>
      <view>
        <uni-swipe-action>
          <uni-swipe-action-item v-for="(item, index) in state.list" :key="index" @change="onChange">
            <view class="relative bg-#F5F5F5 c-#666 text-28 px-4 py-3" @click="onNoticeDetail(item)">
              <u-badge v-if="!item.is_read" :is-dot="true" :offset="[16, 16]" type="error"></u-badge>
              <view class="flex items-center mb-1">
                <view class="flex-1 c-#333 text-32">{{ noticeType(item.type, 'label') }}</view>
                <view class="c-#999 text-28">{{ item.createtime }}</view>
              </view>
              <view class="c-#666 text-sm"><text v-if="item.type == 'dynamic_notice' || item.type == 'answered' || item.type == 'work_arrange'">{{ `@${item.sender?.nickname}` }}</text>{{ item.content }}</view>
            </view>
            <!-- 右侧按钮 -->
            <template #right>
              <view class="w-120 flex justify-center items-center bg-#FF513A" @click="onDelete(item.id)">
                <image class="w-76 h-76" src="/static/images/user/ic_delete.png" />
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </z-paging-list>
  </view>
</template>

<script setup>
import { navigate, showToast } from "@/common/util/uni";
import { noticeTypeList } from '@/common/constant/user.js'
import { getMessageLists, getMessageNum, postMessageAllRead, postMessageDel, postMessageRead, getClubJump } from '@/common/http/module/notice.js'

const list = ref();
const state = reactive({
  totalNum: 0, // 总消息数
  noticeNum: 0,
  list: []
})

// 格式化通知类型
function noticeType (type, field) {
  return noticeTypeList.find(v => v.value == type)[field] ?? ''
}

// 删除消息
function onDelete (message_id) {
  postMessageDel({ message_id }).then(() => {
    showToast('删除成功')
    refresh()
  })
}

function onChange (e) {
  console.log(e);
}

// 全部已读
function onClear () {
  postMessageAllRead().then(() => {
    showToast('清除未读成功')
    refresh()
  })
}

// 已读并跳转通知
async function onNoticeDetail (notice) {
  const societyJumpType = ['create_success', 'apply_pass', 'invite_answer', 'answered', 'work_arrange', 'dynamic_notice']
  // 跳转学社首页的通知需要先调接口判断能不能跳转
  if (societyJumpType.includes(notice.type)) {
    const { data } = await getClubJump(notice.club_id)
    if (!data) {
      showToast('此学社使用权益过期，已暂停服务', 'none')
      return
    }
  }
  const baseUrl = noticeType(notice.type, 'url')
  const urlParams = noticeType(notice.type, 'params')
  const jumpUrl = urlParams ? `${baseUrl}?${urlParams}=${notice.link_id}&&tabId=${notice.type == 'work_arrange' ? 4 : 0}` : baseUrl
  if (notice.link_id == 0 && notice.type == 'answered') {
    showToast('该回答已删除', 'error')
  } else if (notice.link_id == 0 && notice.type == 'invite_answer') {
    showToast('该提问已删除', 'error')
  } else {
    navigate(jumpUrl)
  }
  await postMessageRead({ message_id: notice.id }).then(() => {
    refresh()
  })
}

// 未读消息数量
async function loadNoticeNum () {
  const { data } = await getMessageNum()
  state.noticeNum = data ?? 0
}

function refresh () {
  list.value.onRefresh()
}

function loadData (page) {
  getMessageLists(page).then(res => {
    state.totalNum = res.data?.total
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad(() => {
  loadData;
  loadNoticeNum()
});
</script>

<style lang="scss" scoped>
:deep(.uni-swipe) {
  margin-bottom: 12rpx;
}
</style>
